<template>
    <div class="project-container" ref="ProContainer">
        <ul class="project-list">
            <li v-for="(item, index) in refData.rows" :key="index">
                <a class="imageThumb" :href="item.url ? item.url : 'javascript:alert(`为内部项目不给予展示`)'">
                    <ImageLoader :style="{ borderRadius: '5px' }" :isListImage="true" :src="item.thumb"
                        :placeholder="LoadSrc"></ImageLoader>
                </a>
                <div class="info">
                    <h2 class="title"> <a :href="
                        item.url ? item.url : 'javascript:alert(`为内部项目不给予展示`)'
                    ">{{ item.name }}</a></h2>
                    <a :href="item.github" class="github">github</a>
                    <p class="des" v-for="(des, i) in JSON.parse(item.description)" :key="i">
                        {{ des }}
                    </p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import { getRefData, setTitle } from '@/composition/getData';
import { getProject } from "@/api/project.js";
import ImageLoader from '@/components/ImageLoader/index.vue';
import LoadSrc from "@/assets/loading.gif";
import { onBeforeMount, ref } from "vue"
import Scroll from "@/composition/Scroll.js";

export default {
    setup() {
        const ProContainer = ref(null);
        onBeforeMount(() => {
            setTitle();
        })
        Scroll(ProContainer);
        return {
            refData: getRefData(getProject),
            LoadSrc,
            ProContainer
        }
    },
    components: {
        ImageLoader
    }
}
</script>

<style lang="less" scoped>
@import url("@/style/var.less");

.project-container {
    width: 100%;
    height: 100vh;
    overflow: auto;
    scroll-behavior: smooth;

    .project-list {
        width: 100%;
        height: 100%;
        padding: 25px 20px;
        box-sizing: border-box;

        li {
            display: flex;
            padding: 20px;
            margin-bottom: 20px;
            transition: .3s;

            &:hover {
                transform: scale(1.01) translate(3px, -3px);
                box-shadow: -1px 1px 5px #000;
                cursor: pointer;
            }

            .imageThumb {
                width: 250px;
                height: 150px;
                flex: 0 0 auto;
                object-fit: cover;
                border-radius: 5px;
                display: inline-block;
                transition: .3s;

                &:hover {
                    transform: scale(1.1);
                    box-shadow: -2px -2px 5px #000;
                }
            }

            .info {
                flex: 1 1 auto;
                margin-left: 20px;

                h2 {
                    margin: 0px;
                    font-size: 24px;
                    font-weight: bold;

                    a {
                        font-weight: bold;
                    }
                }

                .github {
                    color: @gray;
                    font-size: 15px;

                    &:hover {
                        color: @primary;
                    }
                }

                p {
                    margin: 15px 0;
                }
            }
        }
    }
}
</style>